<template>
  <div>
    <el-table
      :data="orderList"
      height="460"
      style="width: 100%; margin-top:40px"
      highlight-current-row
    >
      <template slot="empty">
        <p>{{ dataText }}</p>
      </template>

      <el-table-column prop="id" label="id" sortable align="center" />
      <el-table-column
        prop="status"
        label="订单状态"
        width="120"
        align="center"
        :filters="options"
        :filter-method="filterHandler"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 0" type="danger">未支付</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="primary">已支付</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="info">已发货</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="warning">已取消</el-tag>
          <el-tag v-else-if="scope.row.status === 4" type="success">已完成</el-tag>
          <el-tag v-else-if="scope.row.status === 5" type="warning">已超时</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="购买单价" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.price | num2Point }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="购买数量" align="center" />
      <el-table-column label="总金额">
        <template slot-scope="scope">
          <span>{{ scope.row.price * scope.row.num | num2Point }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" sortable align="center" />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="toDetail(scope.$index, scope.row)">详情</el-button>
          <!-- <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import * as order from '@/utils/order'
export default {
  data() {
    return {
      orderList: [],
      hasData: false,
      dataText: '',
      options: [
        // {
        //   value: 6,
        //   text: '全部'
        // },
        {
          value: 0,
          text: '未支付'
        }, {
          value: 1,
          text: '已支付'
        }, {
          value: 2,
          text: '已发货'
        }, {
          value: 3,
          text: '已取消'
        }, {
          value: 4,
          text: '已完成'
        }, {
          value: 5,
          text: '已超时'
        }
      ]
    }
  },
  created() {
    this.getUserOrderList()
  },
  methods: {
    getUserOrderList() {
      order.getUserOrderList(this.$route.params.uid).then(res => {
        // console.log(this.orderList)
        if (res.object && res.object.length > 0) {
          this.hasData = true
        } else {
          // this.$message('暂无订单数据')
          this.dataText = '暂无数据'
        }
        this.orderList = res.object
      })
    },
    toDetail(index, obj) {
      this.$router.push(`/order/detail/${obj.id}`)
    },
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    }
  }

}
</script>
<style lang="scss" scoped>

</style>
